<!-- @format -->

<template>
	<div class="store-chart-content flex justify-bewteen m-t-2">
		<div class="ratio flex">
            <home-title title="仓库货位使用分析" />
			<StoreRatio class="flex-1" />
		</div>
        <div class="trend flex">
            <!-- <home-title title="近一年仓储趋势图" /> -->
            <home-title title="近六月堆放趋势图" />
			<div style="margin-top:14px" class="flex-1 flex">
				<StoreTrend class="flex-1" />
			</div>
			
		</div>
	</div>
</template>

<script setup>
import StoreRatio from "./components/store-ratio.vue";
import StoreTrend from "./components/store-trend.vue";
import HomeTitle from "./components/home-title.vue";
</script>

<style lang="less" scoped>
.store-chart-content {
  width: 100%;
  height: 415px;
  gap: 20px;

  > div {
    flex: 1 1 auto;
    background: linear-gradient(0deg, #ffffff, #ffffff),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.76) 0%,
        rgba(222, 239, 255, 0.76) 100%
      );
    flex-direction: column;
    border-radius: 9px;

    .home-title {
      flex: 0 0 auto;
    }

    &.ratio {
      width: 40%;
      flex: 0 0 auto;
    }

    &.trend {
      width: 60%;
    }
  }
}
</style>
